import { Canvas, Story, Meta } from "@storybook/blocks";
import { Stack, TimeInput } from "metabase/ui";
import * as TimeInputStories from "./TimeInput.stories";

<Meta of={TimeInputStories} />

# TimeInput

Our themed wrapper around [Mantine TimeInput](https://v6.mantine.dev/dates/time-input/).

## Docs

- [Mantine TimeInput Docs](https://v6.mantine.dev/dates/time-input/)
- [HTML Time Input Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time)

# Examples

<Canvas of={TimeInputStories.Default} />

### Size - md

<Canvas of={TimeInputStories.EmptyMd} />

#### Filled

<Canvas of={TimeInputStories.FilledMd} />

#### Asterisk

<Canvas of={TimeInputStories.AsteriskMd} />

#### Description

<Canvas of={TimeInputStories.DescriptionMd} />

#### Disabled

<Canvas of={TimeInputStories.DisabledMd} />

#### Error

<Canvas of={TimeInputStories.ErrorMd} />

#### Read only

<Canvas of={TimeInputStories.ReadOnlyMd} />

### Size - xs

<Canvas of={TimeInputStories.EmptyXs} />

#### Filled

<Canvas of={TimeInputStories.FilledXs} />

#### Asterisk

<Canvas of={TimeInputStories.AsteriskXs} />

#### Description

<Canvas of={TimeInputStories.DescriptionXs} />

#### Disabled

<Canvas of={TimeInputStories.DisabledXs} />

#### Error

<Canvas of={TimeInputStories.ErrorXs} />

#### Read only

<Canvas of={TimeInputStories.ReadOnlyXs} />
